import React, { useState, useEffect } from "react";
import { View, StyleSheet, Dimensions, Text, ScrollView, StatusBar, TouchableOpacity } from "react-native";
import { useIsFocused } from '@react-navigation/native';
import { useDispatch } from "react-redux";
import { Icon, Button } from "@rneui/themed";
import { Shadow } from "react-native-shadow-2";
import { getValue, setObjectValue } from "@/utils/deviceStorage";
import Swipeout from "react-native-swipeout";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const AddressBook = (props) => {

    const dispatch = useDispatch();
    const isFocused = useIsFocused();
    const [addressBook, setAddressBook] = useState([]);
    const [selectedRow, setSelectedRow] = useState('');

    useEffect(() => {
        let list = getValue('addressBook')
        setAddressBook(list)
    }, [isFocused])

    const handlePressItem = (item) => {
        dispatch({ type: "setToAddress", value: item.address || '' })
        props.navigation.goBack()
    }

    const handlePressDel = () => {
        let arr = []
        addressBook.forEach(item => (item.address != selectedRow && arr.push(item)))
        setAddressBook(arr)
        setObjectValue('addressBook', arr)
    }

    const swipeoutBtns = [
        {
            component:
                (
                    <View style={{ height: 73 * ratio, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5F6FA' }}>
                        <Button onPress={handlePressDel}
                            buttonStyle={{
                                width: 70 * ratio, height: 40 * ratio, borderRadius: 5,
                                backgroundColor: '#FF0000', justifyContent: 'center', alignItems: 'center',
                            }}>
                            <Text>Delete</Text>
                        </Button>
                    </View>
                )
        }
    ];

    return (
        <View style={styles.container}>
            {/* headerContent */}
            <View>
                <StatusBar backgroundColor='#5B6DFD' barStyle='light-content' />
                <View style={styles.titleContent}>
                    <View style={{ flexDirection: 'row', width: width, alignItems: 'center', justifyContent: 'space-between', marginTop: 13 * ratio }}>
                        <View style={{ flex: 2 }}>
                            <Icon type="antdesign" name="left" size={16} color='#FFFFFF' style={{ marginLeft: 15 * ratio }}
                                onPress={() => props.navigation.goBack()} />
                        </View>
                        <View style={{ flex: 6, alignItems: 'center' }}>
                            <Text style={styles.title1}>Address book</Text>
                        </View>
                        <View style={{ flex: 2 }}>
                            <Icon type="antdesign" name="plus" size={16} color='#FFFFFF' style={{ marginLeft: 15 * ratio }}
                                onPress={() => { props.navigation.navigate('add-address') }} />
                        </View>
                    </View>
                </View>
            </View>
            {/* bodyContent */}
            <ScrollView style={{ flex: 1, marginTop: 6 * ratio }}>
                {addressBook && addressBook.map((item, index) => {
                    return (
                        <Swipeout
                            key={index}
                            onOpen={() => { setSelectedRow(item.address) }}
                            style={{ backgroundColor: '#F5F6FA' }}
                            right={swipeoutBtns}
                            autoClose={true}
                            close={true}>
                            <TouchableOpacity onPress={() => { handlePressItem(item) }}
                                style={{ alignItems: 'center', height: 73 * ratio, justifyContent: 'center' }}>
                                <Shadow offset={[3, 6]}
                                    distance={0} startColor='rgba(0,0,0,0.16)' finalColor='transparent' radius={5}>
                                    <View style={styles.itemContent}>
                                        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                            <Icon type="entypo" name="location-pin" size={14} color='#8A8A8A' style={{ marginLeft: 22 * ratio }} />
                                            <Text style={{ ...styles.title2, marginLeft: 10 * ratio, color: '#8A8A8A' }}>{item.label}</Text>
                                        </View>
                                        <Text ellipsizeMode='middle' numberOfLines={1}
                                            style={{ ...styles.title2, width: 73 * ratio, marginRight: 24 * ratio }}>
                                            {item.address}
                                        </Text>
                                    </View>
                                </Shadow>
                            </TouchableOpacity>
                        </Swipeout>
                    )
                })}
            </ScrollView>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5F6FA'
    },
    titleContent: {
        width: width,
        height: 54 * ratio,
        backgroundColor: '#5B6DFD'
    },
    itemContent: {
        width: 340 * ratio,
        height: 61 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },
    title1: {
        fontSize: 15,
        fontFamily: 'Microsoft YaHei',
        fontWeight: 'bold',
        color: '#F9F9F9',
        lineHeight: 20
    },
    title2: {
        fontSize: 12,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#9D9D9D',
        lineHeight: 15
    }
})
export default AddressBook